<template>
  <div class="block text-center">
    <el-carousel height="300px" motion-blur indicator-position="outside">
      <el-carousel-item v-for="item in imgs" :key="item">
        <el-image
          :src="item"
          style="width: 100%; height: 100%;"
          :preview-src-list="imgs"
          fit="fill"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
  <Tabmenu />
  <myindex />
</template>
<script setup>
import myindex from "./myindex.vue";
import Tabmenu from "./tabmenu.vue";
import { ref } from "vue";
const imgs = ref([
  "/b1.jpg",
  "/b2.jpg",
  "/b3.jpg",
  "/b4.jpg",
  "/mybanner1.png",
]);
</script>
<style>
.mybanner {
  width: 100%;
  height: auto;
  object-fit: contain;
  min-height: 210px;
  background-color: aliceblue;
  background-image: url(/mybanner1.png);
  /*  background-size: cover;  背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
